<template>
	<view class="app">
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar :shadow="false" title="商品列表">
			<!-- #ifdef MP -->
			<view class="u-flex icon_setUp" slot="left">
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="u-flex icon_setUp" slot="right">
			<!-- #endif -->
				<image class="icon_setUp_address" src="/static/icon/ic_location.png"></image>
				<text class="u-flex-m ellipsis icon_setUp_text">广东-福建省</text>
			</view>
		</nav-bar>
		<!-- #endif -->
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="tabs u-flex">
			<view class="u-flex u-flex-m tabs-list" v-for="(tab,i) in tabs" :key="i">
			  <view class="tabs-cell" :class="{active:tabIndex == i}" @click='titleClick(i)'>{{tab.name}}</view>
			</view>
		</view>
		<view class="nav u-flex">
			<view class="u-flex nav-cell">
				<image class="nav_icon_map" src="/static/icon/ic_map.png"></image>
				<text class="ellipsis nav_text">地图模式</text>
			</view>
			<view class="u-flex u-flex-m nav-cell">
				<text class="ellipsis nav_text">拍品排序</text>
				<image class="nav_icon_down" src="/static/icon/ic_down.png"></image>
			</view>
			<view class="u-flex u-flex-m nav-cell">
				<text class="ellipsis nav_text">全能行业</text>
				<image class="nav_icon_down" src="/static/icon/ic_down.png"></image>
			</view>
			<view class="u-flex nav-cell" :class="{active:isScreen}" @click="screen()">
				<text class="ellipsis nav_text">筛选</text>
				<image v-if="!isScreen" class="nav_icon_down" src="/static/icon/ic_down.png"></image>
				<image v-if="isScreen" class="nav_icon_down" src="/static/icon/ic_down_red.png"></image>
			</view>
		</view>
		<view class="section" :style="[{top:sectionTop}]" v-if="section == 1000">
			<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,i) in tabs" :key="i">
					<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :selData="selData"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<view class="section screen" :style="[{top:sectionTop},{height: height}]"  v-if="section == 2000">
			<view class="sel">
				<view class="h2">竞拍状态</view>
				<view class="u-flex sel-item">
					<view v-for="(item,index) in status" class="btn" :class="{active:item.bl}" @click="onStatus(index)">{{item.name}}</view>
				</view>
				<view class="h2">竞拍方式</view>
				<view class="u-flex sel-item">
					<view v-for="(item,index) in modes" class="btn" :class="{active:item.bl}" @click="onModes(index)">{{item.name}}</view>
				</view>
				<view class="h2">现货期货</view>
				<view class="u-flex sel-item">
					<view v-for="(item,index) in grounds" class="btn" :class="{active:item.bl}" @click="onGrounds(index)">{{item.name}}</view>
				</view>
			</view>
			
			<view class="u-flex sel-b">
				<view class="btn" @click="onReset()">重置</view>
				<view class="btn active u-flex-m" @click="onSubmit()">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollItem from "./goods-item.vue";
	var _self;
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				section:1000,
				tabIndex:0,
				height:"400px",
				isScreen:false,
				pageNo:1,
				pageSize:10,
				sectionTop:0,
				tabs:[{name:'全部',sell:''}, {name:'拍卖',sell:true}, {name:'拍买',sell:false}],
				status:[{
					label:"ready",
					name:"即将开始",
					bl:false
				},{
					label:"on_going",
					name:"正在进行",
					bl:false
				},{
					label:"finished",
					name:"已完成",
					bl:false
				},{
					label:"closed",
					name:"已关闭",
					bl:false
				}],
				modes:[{
					label:"second_auction",
					name:"秒拍",
					bl:false
				},{
					label:"bargaining_auction",
					name:"议价拍",
					bl:false
				},{
					label:"price_cut_auction",
					name:"降价拍",
					bl:false
				},{
					label:"price_increase_auction",
					name:"升价拍",
					bl:false
				}],
				grounds:[{
					label:"futures_market",
					name:"期货场",
					bl:false
				},{
					label:"spot_market",
					name:"现货场",
					bl:false
				}],
				selData:{}
			}
		},
		onLoad(e) {
			_self = this;
			// #ifdef MP-ALIPAY
			_self.sectionTop = uni.upx2px(88)*2 + 'px';
			_self.height = (uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight  - uni.getSystemInfoSync().titleBarHeight - uni.upx2px(88)*2) + 'px';
			// #endif
			// #ifndef MP-ALIPAY
			_self.sectionTop = uni.getSystemInfoSync().statusBarHeight + uni.upx2px(88)*3 + 'px';
			_self.height = (uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(88)*3) + 'px';
			// #endif
		},
		methods: {
			titleClick(i){
				_self.tabIndex = i;
			},
			swiperChange(e){
				_self.tabIndex = e.detail.current
			},
			onStatus(index){
				_self.status[index].bl = !_self.status[index].bl;
			},
			onModes(index){
				_self.modes[index].bl = !_self.modes[index].bl;
			},
			onGrounds(index){
				_self.grounds[index].bl = !_self.grounds[index].bl;
			},
			screen(){
				if(_self.isScreen){
					_self.section = 1000;
				}else{
					_self.section = 2000;
				}
				_self.isScreen = !_self.isScreen;
			},
			onReset(){
				_self.status.map(function(e){
					e.bl = false
				});
				_self.modes.map(function(e){
					e.bl = false
				});
				_self.grounds.map(function(e){
					e.bl = false
				});
			},
			onSubmit(){
				_self.section = 1000;
				_self.isScreen = false;
				var status = [], modes = [], grounds = [];
				_self.status.map(function(e){
					e.bl && status.push(e.label)
				});
				_self.modes.map(function(e){
					e.bl && modes.push(e.label)
				});
				_self.grounds.map(function(e){
					e.bl && grounds.push(e.label)
				});
				_self.selData = {
					status:status,
					modes:modes,
					grounds:grounds,
				}
			}
		},
		onPageScroll(e) {},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style lang="scss" scoped>
	.app{
		font-family: 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei',sans-serif;
	}
	.color-red{color: #EC615C;}
	.icon_setUp{
		width: 187rpx;
		height: 32rpx;
		/* #ifdef MP */
		padding-left: 24rpx;
		/* #endif */
		/* #ifndef MP  */
		padding-right: 24rpx;
		/* #endif  */
		font-size: $uni-font-size-base;
		.icon_setUp_address{
			width: 28rpx;
			height: 32rpx;
		}
		.icon_setUp_text{
			padding-left: 12rpx;
			line-height: 32rpx;
		}
	}
	.tabs{
		background-color: $uni-text-color-inverse;
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: $uni-font-size-lg;
		.tabs-cell{
			width: 80rpx;
			height: 88rpx;
			text-align: center;
		}
		.tabs-list{justify-content: center;}
		.active{color: #EC615C;border-bottom: 4rpx solid #EC615C;}
	}
	.nav{
		background-color: $uni-text-color-inverse;
		width: 100%;
		height: 88rpx;
		font-size: $uni-font-size-sm;
		.nav_icon_map{
			width: 30rpx;
			height: 28rpx;
		}
		.nav_icon_down{
			width: 18rpx;
			height: 12rpx;
		}
		.nav-cell{
			justify-content: center;
			padding: 0 40rpx;
			height: 32rpx;
			border-right: 1px #ccc solid;
		}
		.nav-cell:nth-child(2),.nav-cell:nth-child(3){padding:0}
		.nav-cell:first-child .nav_text{
			padding-left: 10rpx;
			padding-right: 0;
		}
		.nav-cell:last-child{
			border: 0;
		}
		.nav_text{
			padding-right: 10rpx;
		}
		.nav-cell.active .nav_text{
			color: #EC615C;
		}
	}
	.section{
		width: 750rpx;
		position: absolute;
		top: 262rpx;
	}
	.goods{
		margin-top: 24rpx;
		background-color: $uni-text-color-inverse;
	}
	.goods-item{
		width: 750rpx;
		padding: 24rpx 32rpx 35rpx;
		border-bottom: 1px #EAEAEA solid;
		.goods-item-pic{
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
		.goods-item-info{
			height: 200rpx;
			padding-left: 24rpx;
			font-size: $uni-font-size-sm;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			.title{
				font-size: $uni-font-size-base;
				color: $uni-text-color;
			}
			.goods-item-info-m{
				line-height: 42rpx;
				color:  $uni-text-color-grey;
			}
			.goods-item-info-b text:nth-child(2){
				font-size: $uni-font-size-lg;
			}
			.goods-item-info-b text:nth-child(3){
				float: right;
			}
		}
	}
	.goods-item.red{
		.goods-item-info-b,.time{
			color: #EC615C;
		}
	}
	.goods-item.red{
		.goods-item-info-b,.time{
			color: #EC615C;
		}
	}
	.goods-item.green{
		.goods-item-info-b,.time{
			color:#57B05A;
		}
	}
	.goods-item.green{
		.goods-item-info-b,.time{
			color:#57B05A;
		}
	}
	
	.screen{
		background-color: #f5f5f5;
		.h2{
			padding-top: 32rpx;
			font-size: $uni-font-size-base;
		}
		.sel{
			padding-left: 32rpx;
			padding-bottom: 35rpx;
			background-color: $uni-text-color-inverse;
		}
	}
	.sel-item{
		flex-wrap: wrap;
	}
	.btn{
		width: 145rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #F7F7F7;
		color: #333;
		border-radius: 10rpx;
		font-size: $uni-font-size-sm;
		text-align: center;
		margin-right: 35rpx;
		margin-top: 24rpx;
	}
	.btn:active{
		background-color:rgba(0,0,0,.1)
	}
	.btn:last-child{
		margin-right:0
	}
	.btn.active{
		background-color: #ec615c;
		color: #fff;
	}
	.sel-b{
		padding:8rpx 32rpx 32rpx 32rpx;
		border-top: 1px #EAEAEA solid;
		background-color: $uni-text-color-inverse;
		.btn{
			height:80rpx;
			line-height: 80rpx;
		}
	}
</style>
